<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
<script src="js/bootstrap.min.js" charset="UTF-8"></script>
<script src="js/swiper.min.js" charset="UTF-8"></script>
<script src="js/global.js" charset="UTF-8"></script>
<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
<title>U袋网</title>
<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!-- 引入个人中心头部 -->
	<jsp:include page="user-header.jsp"></jsp:include>

	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<div class="user-content__box clearfix bgf">
				<div class="title">购物车</div>
				<c:if test="${ empty USER_SESSION}">
				<h3>您还没有登录呦~</h3>
			</c:if>
			<c:if test="${ not empty USER_SESSION}">
				<form action="udai_shopcart_pay.jsp" class="shopcart-form__box">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th width="150"><label class="checked-label">
								<i></i> 全选</label></th>
								<th width="300">商品信息</th>
								<th width="150">单价</th>
								<th width="200">数量</th>
								<th width="200">小计</th>
								<th width="80">操作</th>
							</tr>
						</thead>
						<c:forEach items="${cartList }" var="cartList">
							<tbody class="th">
								<tr>
									<th scope="row">
									 <label class="checked-label"> 
									    <input type="checkbox" name="id" value="${cartList.shopId }" data-xiaoji="${cartList.currentPrice*cartList.pnum }"><i></i>
											<div class="img">
											  <a href="getProTuiTypeId?proId=${cartList.proId }">
												<img src="../admin/showPic/${cartList.proUrl }" alt="" class="cover">
											  </a>
											</div>
									  </label>
									</th>
									<td>
										<div class="name ep3">${cartList.proName }</div>
										<div class="type c9">品牌：${cartList.brand }
											材质：${cartList.material }</div>
									</td>
									<td class="price">¥${cartList.currentPrice }</td>
									<td class="ber">
										<div class="num cart-num__box">
											<input type="button" class="sub" value="-" data-id="${cartList.shopId }"> 
											<input type="text" class="val" value="${cartList.pnum }" name="num">
											<input type="button" class="add" value="+" data-id="${cartList.shopId }">
										</div>
									</td>
									<td class="price sAll">¥${cartList.currentPrice*cartList.pnum }</td>
									<td class="price"><a class="del"
										href="javascript:delCartFun(${cartList.shopId })">删除</a></td>
								</tr>
							</tbody>
						</c:forEach>
					</table>
					<div class="user-form-group tags-box shopcart-submit pull-right">
						<!--  <a href="javascript:jieSuanFun()" class="count btn">结算</a> -->
						<button type="button" onclick="addTo()" class="btn">提交订单</button>
					</div>
					<div class="checkbox shopcart-total">
						<label> 
						<input type="checkbox" class="checkAll check-all"><i></i>
							全选
						</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="javascript:delBatchFun()">批量删除</a>
						<div class="fr pull-right">
							<!-- <span>共<small id="sl">0</small>件商品 -->
							</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
							<b class="cr">（不含运费）
							<span class="fz24">合计:&nbsp;<small id="all">￥ ${sum }</small></span>
							</b>
						</div>
					</div>

					<script>
					//点击结算跳转到结算页
					function addTo(){
						var arr=[];
						 $(".th input[type='checkbox']:checked").each(function(){
							 arr.push($(this).val())//默认复选框全部勾选
					      })
					      //监听提交订单时，是否勾选上checkbox，跳转到提交订单页进行支付
					      if(arr.length==0){
					    	  alert("您需要最少选择一个商品")
					      }else{
					    	  var ids=arr.join(",");  //字符串
					    	//请求服务器 跳转页面
						    	window.location.href="getGouCatList?ids="+ids
					      }
					}
					
					//监听复选框
					$(document).ready(function() {
						$(':checkbox').attr("checked",true);
						var $item_checkboxs = $('.shopcart-form__box tbody input[type="checkbox"]'),
							$check_all = $('.check-all');
						// 全选
						$check_all.on('change', function() {
							$check_all.prop('checked', $(this).prop('checked'));
							$item_checkboxs.prop('checked', $(this).prop('checked'));
						});
						// 点击选择
						$item_checkboxs.on('change', function() {
							var flag = true;
							$item_checkboxs.each(function() {
								if(!$(this).prop('checked')) {
									flag = false
								}
							});
							$check_all.prop('checked', flag);
							
							console.log($(this))
						});
						// 个数限制输入数字
						$('input.val').onlyReg({
							reg: /[^0-9.]/g
						});
						// 加减个数
						$('.cart-num__box').on('click', '.sub,.add', function() {
							var value = parseInt($(this).siblings('.val').val());
							var num = 1;
							if($(this).hasClass('add')) {
								$(this).siblings('.val').val(Math.min((value += 1), 10));
							} else {
								num = -1;
								$(this).siblings('.val').val(Math.max((value -= 1), 1));
							}
							
							//异步请求修改数据库中的购物车该商品的数量
							var id = $(this).data("id");
							$.post("updateCartNum",{"id":id, "num":num},function(res){
								console.log(res);
								//刷新页面
								window.location.reload()
							},"json")
							
						});
						
					});
					//单个删除
					function delCartFun(id){
						var ids="";
				    	$("input[name='id']").each(function(){
				    		if(this.checked){
				    			ids+=$(this).val()+",";
				    		}
				    	});
				    	//请求服务器
				    	$.post("deletePiCart",{"ids":id},function(res){
				    		alert(res.msg);
				    		window.location.reload();
				    	},"json")
				    }
					
					//批量删除
				    function delBatchFun(){
				    	var ids="";
				    	$("input[name='id']").each(function(){
				    		if(this.checked){
				    			ids+=$(this).val()+",";
				    		}
				    	});
				    	//请求服务器
				    	$.post("deletePiCart",{ids:ids},function(res){
				    		alert(res.msg);
				    		window.location.reload();
				    	},"json");
				    	
				    }
					
					</script>
				</form>
			  </c:if>
			</div>
		</section>
	</div>
	<!-- 引入右侧菜单 -->
	<jsp:include page="right-nav.jsp"></jsp:include>
	<!-- 底部信息 -->
	<!-- 引入脚部 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>